<template>
	<view class="filiWrap">
		<view class="navs_head">
			<text>备案</text>
		</view>
		<view class="mainWrap">
			<view class="tabLoopList">
						<view class="loopItem" v-for="(item,index) in bookTypeList" :key="item.id" :class="{item_active:itemActive === index}" @click="checkItem(index)">
							{{item.value}}
						</view>
			</view>
			<view class="tabsList" >
					 <view v-for="(item,index) in tabsList" :key="index" :class="{tabActive:index === tabActive}" @click="checktabActive(index)">
						{{item.value}}
					 </view>
			</view>
			<view class="cardList">
				<DatePicker @changeTime="changeTime"></DatePicker>
					<custom-pagination
						v-model:list="cardList"
						v-model:loading="loading"
						v-model:no-more-data="noMoreData"
						@refresh="refreshList"
						@load-more="loadMoreList"
					>
				 <template #list>
					<CardWrap v-for="(item,index) in cardList" :key="index">
							<view class="card_title">
								<view class="reciver">
									发送时间：{{item.createTime}}
								</view>
							</view>
							<view class="card_content">
								<view class="left">
									<text>{{item.jcDocName}}</text>
									<text>{{item.jcaddress}}</text>
								</view>
								<view class="right">
									<view class="seeDetailBtn" @click="seeDetail(item.id)">
										 查看
									</view>
								</view>
							</view>
							<view class="process_line" v-show="tabActive === 0" v-if="false">
	<!-- 							<view v-for="(item,index) in [1,2]" :key="index">
									司法局 已于 2025年04月06日 查看此检察建议
								</view> -->
									<uni-steps :options="list2" active-color="#007AFF" :active="activeDot" direction="column" />
							</view>
					   </CardWrap>
			</template>
			</custom-pagination>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {reactive,ref} from 'vue'
	import {getDocumentList,seeDocumentRecord} from '@/api/document.js'
	const bookTypeList = ref([
		{id:1,value:"检察建议书"},
		{id:2,value:"磋商文书"},
	])
	const itemActive = ref(0)
	const checkItem = (index)=>{
		itemActive.value = index
		postData.deliveryType = bookTypeList.value[index].id
		refreshList()
	}
	const tabsList = [{id:1,value:"已查看"},{id:0,value:"未查看"}]
	const tabActive = ref(0)
	const checktabActive = (index)=>{
		tabActive.value = index
		postData.isConsulted = tabsList[index].id
		refreshList()
	}
   // 获取司法局查看记录
   const requireLawHistory = (id)=>{
	 return new Promise(async(resolve)=>{
		 try{
		 const {code,data} = await seeDocumentRecord({
		 		  id
		 })
		 if(code === 200){
		 	 resolve(data)
		 }else{
		 	 resolve([])
		 }	
		 }catch(e){
		 	//TODO handle the exception
			 resolve([])
		 }

	   })

   }
	const list2 = [
		{
			title: '司法局 已于 2025年04月06日 查看此',
		}, {
			title: '司法局 已于 2025年03月25日 查看此检察建议',
		}
	]
	
	const activeDot = ref(1)
	// 查看详情
	const seeDetail = (id)=>{
			uni.navigateTo({
				url:`/pages/fileList/fileList?id=${id}&showRecord=true`
			})
	}
	// 分页功能区域代码
	const cardList = ref([]) //分页列表
	const loading = ref(false) //数据加载中
	const noMoreData = ref(false) //暂无更多数据
	// 获取文书列表
	const postData = reactive({
			deliveryType:"1" ,//送达文件类型（1 检察建议书 2 检察意见书 3 磋商文书）
			isConsulted:"1",//是否查阅（0未查阅 1已查阅）
			startTime:"",//开始时间
			endTime:"",//结束时间
			pageNum:1,//页码、
			pageSize:10//页数
	})
	const getPageList = async (refresh = false) => {
		loading.value = true
		try {
			const { code, data: res } = await getDocumentList(postData)
			if (code === 200) {
				const { total, list } = res
				const newList = list.map(val=>{
					return {...val,jcDocName:bookTypeList.value[itemActive.value].value,jcaddress:"上海市崇明区人民检察院"} 
				})
				if (refresh) {
					cardList.value = newList
				} else {
					cardList.value = [...cardList.value, ...newList]
				}
				noMoreData.value = total <= postData.pageSize * postData.pageNum
				if (!noMoreData.value) {
					postData.pageNum++
				}
			}
		} catch (e) {
			//TODO handle the exception
			return Promise.reject('获取数据失败', e)
		} finally {
			loading.value = false
		}
	}
	const refreshList = async () => {
		postData.pageNum = 1
		noMoreData.value = false
		await getPageList(true)
	}
	const loadMoreList = async () => {
		if (!noMoreData.value) {
			await getPageList(false)
		}
	}
	const changeTime = (val) => {
		postData.startTime = val[0]
		postData.endTime = val[1]
		getPageList()
	}
</script>

<style lang="scss" scoped>
.filiWrap{
	background-color: #F5FAFF;
	min-height: 100vh;
.navs_head{
	height: 12vh;
	/* #ifdef H5 */
	height: 8vh;
	/* #endif */
	position: relative;
	text{
	position: absolute;
	left: 32rpx;
	top: 60%;
	/* #ifdef H5 */
	top: 30%;
	/* #endif */
	font-weight: normal;
	font-size: 48rpx;
	color: #00041A;
	line-height: 58rpx;
	z-index: 2;	
	}

	}
	.mainWrap{
	padding: 0 30rpx;
	.tabLoopList{
			width: 100%;
			bottom: 0;
			display: flex;
			.loopItem{
				padding: 25rpx 0;
				font-size: 32rpx;
				color: #686A73;
				font-weight: 500;
				margin-right:120rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.item_active{
				color: #00041A;
				position: relative;
				&::after{
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					content: "";
					width: 48rpx;
					height: 8rpx;
					background: #0D53FE;
					border-radius: 4rpx;
				}
			}
			
		}
		.tabsList{
			display: flex;
			height: 64rpx;
			background: #F7F9FD;
			border-radius: 8rpx;
			border: 1rpx solid #0D53FE;
			margin-top: 32rpx;
			overflow: hidden;
			>view{
				flex: 1;
				text-align: center;
				line-height: 64rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #0D53FE;
			}
			.tabActive{
				background: #0D53FE;
				border-radius: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
			.cardList{
				height: calc(88vh - 190rpx);
				padding: 0 0 35rpx 0;
				.card_title{
					padding-bottom: 35rpx;
					border-bottom: 1rpx solid #F2F6F9;
					font-weight: 600;
					font-size: 24rpx;
					color: #00041A;
					display: flex;
					justify-content: space-between;
						.reciver{
						font-weight: 600;
						font-size: 24rpx;
						color: #00041A;
							border-radius: 4rpx;
							line-height: 28rpx;
							
						}
					
				}
				.card_content{
					padding-top: 35rpx;
					display: flex;
					justify-content: space-between;
					.left{
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						text{
							&:first-child{
								font-weight: 600;
								font-size: 32rpx;
								color: #00041A;
								line-height: 45rpx;
								margin-bottom: 10rpx;
							}
							&:last-child{
								font-weight: 400;
								font-size: 24rpx;
								color: #686A73;
								line-height: 33rpx;
								margin-bottom: 10rpx;
							}
						}
					}
					.right{
						display: flex;
						align-items: flex-end;
						justify-content: flex-end;
						position: relative;
						.seeDetailBtn{
							font-weight: 400;
							font-size: 28rpx;
							color: #66686A;
							width: 148rpx;
							height: 62rpx;
							text-align: center;
							line-height: 62rpx;
							background: #F7F9FD;
							border-radius: 8rpx;
						}

	
					}
				}
				.specialDire{
					flex-direction: column;
				}
			}
	}
	.process_line{
		background: #F5FAFF;
		border-radius: 4rpx;
		padding: 15rpx;
		margin-top: 20rpx;
		:deep(.uni-steps__column-title ){
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			padding-left: 12rpx;
			color: #6FAEFF !important;
			margin-bottom: 2rpx;
		}
		:deep(.uni-steps__column-text){
			border: none;
		}
	}
	
}
.datePicker{
	margin-top: 15px;
}
</style>
